<%--
  Created by IntelliJ IDEA.
  User: tantaro
  Date: 2022/12/19
  Time: 22:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理商品的系列</title>
    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./css/search.css" />
    <style>
        table {
            width: 1200px;
            border: 1.5px solid rgb(249, 168, 182);/* border其实就是给表格加了一个外边框而已 */
            margin: 0 auto;/*上下外边距为0，左右自动对齐（居中）*/
        }
    </style>
</head>
<body>
<!-- 网页头部模块 -->
<div class="header">
    <ul>
        <li><a href="#">甜品商城后台</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">查看商品</a></li>
        <li><a href="#">商品销售</a></li>
        <li><a href="#">商品评价</a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#">用户名</a></li>
        <li><a href="#">退出</a></li>
    </ul>
</div>

<!-- 搜索框 -->
<div class="box">
    <input type="text" class="input" placeholder="请输入查找系列">
    <!--placeholder是文本框中的提示文字-->
    <input type="button" value="搜索" class="button">
</div>

<br>
<!--第一行-->
<table>
    <tr>
        <td style="text-align: center;">1001</td>
        <td style="text-align: center;">xx系列</td>
        <td style="text-align: center;"><img src="./img/new_goods_1.jpg" height="80"></td>
        <td style="text-align: center;">&nbsp;&nbsp;&nbsp;&nbsp;蛋糕&nbsp;&nbsp;&nbsp;&nbsp;</td>
        <td style="text-align: center;">
            <a class="btn btn-change" href="#" style="color:rgb(22, 96, 31);">修改</a>
            &nbsp;&nbsp;
            <a class="btn btn-danger" href="#" style="color:rgb(70, 12, 12);">删除</a>
        </td>
    </tr>
</table>

<!--第二行-->
<table>
    <tr>
        <td style="text-align: center;">1002</td>
        <td style="text-align: center;">xx系列</td>
        <td style="text-align: center;"><img src="./img/new_goods_2.jpg" height="80"></td>
        <td style="text-align: center;">&nbsp;&nbsp;&nbsp;马卡龙&nbsp;&nbsp;&nbsp;</td>
        <td style="text-align: center;">
            <a class="btn btn-change" href="#" style="color:rgb(22, 96, 31);">修改</a>
            &nbsp;&nbsp;
            <a class="btn btn-danger" href="#" style="color:rgb(70, 12, 12);">删除</a>
        </td>
    </tr>
</table>

<!--第三行-->
<table>
    <tr>
        <td style="text-align: center;">1003</td>
        <td style="text-align: center;">xx系列</td>
        <td style="text-align: center;"><img src="./img/new_goods_3.jpg" height="80"></td>
        <td style="text-align: center;">圣诞节特刊</td>
        <td style="text-align: center;">
            <a class="btn btn-change" href="#" style="color:rgb(22, 96, 31);">修改</a>
            &nbsp;&nbsp;
            <a class="btn btn-danger" href="#" style="color:rgb(70, 12, 12);">删除</a>
        </td>
    </tr>
</table>

</body>
</html>